<script setup lang="ts">

</script>

<template>
<div style="display: flex; width: calc(100% - 60px); padding: 0px 30px; margin-top: 30px; align-items: center; justify-content: center; align-content: center;">
    <div style="width: 220px; color:#b1191a;font-family: 华文彩云; font-size: 30px; font-weight: bold; text-align: center;">
      💧简易购
    </div>
    <div style="width: calc(100% - 440px); margin-left: 40px; display: flex;">
      <div>
        <input type="text" placeholder="请输入搜索内容" style="width: 600px;display: flex; border: 2px solid #b1191a; outline:none; padding: 10.8px 16px;" />
        <div class="fontType" style="margin-top: 6px;">
          <a href="#" style="margin:10px 16px;">简易购日常</a>
          <a href="#" style="margin:10px 16px;">优惠购首发</a>
          <a href="#" class="a1" style="margin:10px 16px;">亿元优惠券</a>
          <a href="#" style="margin:10px 16px;">购机补贴</a>
          <a href="#" style="margin:10px 16px;">手机好店</a>
          <a href="#" style="margin:10px 16px;">美味土鸡</a>
          <a href="#" style="margin:10px 16px;">数码电子</a>
        </div>
      </div>
      <div>
        <span style="cursor: pointer; display: flex; color: white; background-color: #b1191a; padding: 10px 16px;">搜索</span>
        <div class="fontType" style="margin-top: 6px;"><a href="#" style="margin:10px 16px;">通信</a></div>
      </div>
    </div>
    <div class="fontType" style="width: 180px; font-size: 14px;">
      <span style="background-color: #f7f7f7; padding: 10px 16px; cursor: pointer;">
        🛒我的购物车 〉
      </span>
    </div>
 </div>
 <div style="border-bottom:2px solid #b1191a; margin-top: 20px; padding: 0px 30px; display: flex; text-align: center; align-content: center;align-items: center;">
  <span style="display: block; width: 200px; line-height: 30px; color: white; background-color: #B1191A; padding: 10px 20px;">全部商品 14</span>
 </div> 
 <div class="fontType" style="display: flex; margin: 20px 30px; background-color: #F3F3F3; padding: 10px 20px;">
  <div style="width: calc(100% - 400px);">
    商品
  </div>
  <div style="width:100px;">
    单价
  </div>
  <div style="width:100px;">
    数量
  </div>
  <div style="width:100px;">
    小计
  </div>
  <div style="width:100px;">
    操作
  </div>
 </div>

 <div class="fontType divTitle3">
  <div style="width: calc(100% - 400px);">
    旺旺零食大礼包雪饼仙贝1888g送儿童礼物礼盒
  </div>
  <div style="width:100px;">
    69.9
  </div>
  <div style="width:100px;">
    <a href="#">-</a>&nbsp;&nbsp; 2 &nbsp;&nbsp; <a href="#">+</a>
  </div>
  <div style="width:100px; font-weight: bold;">
    139.8
  </div>
  <div style="width:100px;">
    <a href="#">删除</a> | <a href="#">移入关注</a>
  </div>
 </div>
 
 <div class="fontType divTitle3">
  <div style="width: calc(100% - 400px);">
    蒙牛（MENGNIU）新说唱随变随芯脆巧克力夹心脆皮雪糕70g*10
  </div>
  <div style="width:100px;">
    60
  </div>
  <div style="width:100px;">
    <a href="#">-</a>&nbsp;&nbsp; 3 &nbsp;&nbsp; <a href="#">+</a>
  </div>
  <div style="width:100px; font-weight: bold;">
    180
  </div>
  <div style="width:100px;">
    <a href="#">删除</a> | <a href="#">移入关注</a>
  </div>
 </div>
 
 <div class="fontType divTitle3">
  <div style="width: calc(100% - 400px);">
    麦酥园沙琪玛饼干蛋糕点心无糖精休闲零食品早餐面包整箱办公室
  </div>
  <div style="width:100px;">
    50
  </div>
  <div style="width:100px;">
    <a href="#">-</a>&nbsp;&nbsp; 2 &nbsp;&nbsp; <a href="#">+</a>
  </div>
  <div style="width:100px; font-weight: bold;">
    100
  </div>
  <div style="width:100px;">
    <a href="#">删除</a> | <a href="#">移入关注</a>
  </div>
 </div>

 <div class="fontType divTitle3">
  <div style="width: calc(100% - 400px);">
    【配钢化膜】凯彩 华为mate50手机壳通用mate50e布纹男女
  </div>
  <div style="width:100px;">
    32
  </div>
  <div style="width:100px;">
    <a href="#">-</a>&nbsp;&nbsp; 1 &nbsp;&nbsp; <a href="#">+</a>
  </div>
  <div style="width:100px; font-weight: bold;">
    32
  </div>
  <div style="width:100px;">
    <a href="#">删除</a> | <a href="#">移入关注</a>
  </div>
 </div>

 <div class="fontType divTitle3">
  <div style="width: calc(100% - 400px);line-height: 30px;">
    已选择 <span style="color: #B1191A; font-weight: bold;">8</span> 件商品
  </div>
  <div style="width:100px;line-height: 30px;">
    <a href="#">清理购物车</a>
  </div>
  <div style="width:100px;line-height: 30px;">
    
  </div>
  <div style="width:100px; font-weight: bold;line-height: 30px;">
    总价 <span style="color: #B1191A; font-weight: bold;">451.8</span> 元
  </div>
  <div style="width:100px; text-align: center;">
  <span style="display: block; background-color: #B1191A; line-height: 30px; color:white;">去结算</span>
  </div>
 </div>
 <div style="height: 20px;"></div>
</template>
